<#include "module/layout.ftl">
<@layout title="首页 | ${blog_title!}">
    <section class="vh-100" style="background-color: #fbfbfb;">
        <div class="container px-lg-2 pb-3 bg-white">
            <div class="row mb-3">
                <div id = "left" class="col-xl-8 pr-xl-5 pt-3">
                    <div class="col col-xl-10">

                        <div class="card" style="border-radius: 15px;">
                            <div class="card-body p-5 todo-card">
                                <form class="d-flex justify-content-center align-items-center mb-4">
                                    <div class="form-outline flex-fill">
                                        <input type="text" id = "addTodoInput"  class="form-control form-control-lg" />
    <#--                                    <label class="form-label" for="form3">What do you need to do today?</label>-->
                                    </div>
                                    <button type="button" class="btn btn-primary btn-lg ms-2" onclick="toSubmit()">Add</button>
                                </form>

                                <ul id = "todolistul" class="list-group mb-0 todo-group">
                                    <details open>
                                        <summary>进行中 ${todoList.doing?size}</summary>
                                        <#list todoList.doing as doing>
                                            <li class="list-group-item d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                                                <div class="d-flex align-items-center">
                                                    <#if doing.todoState == 0>
                                                        <input onclick="changeStatus(this, ${doing.id})" class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                                                        ${doing.todoDes}
                                                    <#else>
                                                        <input onclick="changeStatus(this, ${doing.id})" class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
                                                        <s>${doing.todoDes}</s>
                                                    </#if>
                                                </div>
                                                <a href="#!" data-mdb-toggle="tooltip" title="Remove item">
                                                    <i class="fas fa-times text-primary" onclick="delTodo(${doing.id})"></i>
                                                </a>
                                            </li>
                                        </#list>
                                    </details>

                                    <details>
                                        <summary>已完成 ${todoList.finished?size}</summary>
                                        <#list todoList.finished as finished>
                                            <li class="list-group-item d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                                                <div class="d-flex align-items-center">
                                                    <#if finished.todoState == 0>
                                                        <input onclick="changeStatus(this, ${finished.id})" class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                                                        ${finished.todoDes}
                                                    <#else>
                                                        <input onclick="changeStatus(this, ${finished.id})" class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
                                                        <s>${finished.todoDes}</s>
                                                    </#if>
                                                </div>
                                                <a href="#!" data-mdb-toggle="tooltip" title="Remove item">
                                                    <i class="fas fa-times text-primary" onclick="delTodo(${finished.id})"></i>
                                                </a>
                                            </li>
                                        </#list>
                                    </details>

                                    <details>
                                        <summary>已过期 ${todoList.expired?size}</summary>
                                        <#list todoList.expired as expired>
                                            <li class="list-group-item d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                                                <div class="d-flex align-items-center">
                                                    <#if expired.todoState == 0>
                                                        <input onclick="changeStatus(this, ${expired.id})" class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                                                        ${expired.todoDes}
                                                    <#else>
                                                        <input onclick="changeStatus(this, ${expired.id})" class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
                                                        <s>${expired.todoDes}</s>
                                                    </#if>
                                                </div>
                                                <a href="#!" data-mdb-toggle="tooltip" title="Remove item">
                                                    <i class="fas fa-times text-primary" onclick="delTodo(${expired.id})"></i>
                                                </a>
                                            </li>
                                        </#list>
                                    </details>
                                </ul>

                            </div>
                        </div>

                    </div>
                </div>
                <div id = "right" class="col-xl-4 pt-3">
                    <#include "module/index/right.ftl">
                </div>
            </div>
        </div>
    </section>
</@layout>